<template>
  <div class="wrapper">
    <h3>Father</h3>
    <p @click="xiao">学校：{{name}}</p>
    <hr>
    <!-- 
        1. 自定义事件只能给组件绑定 
            绑定之后，之间就在组件身上了

        2. 触发自定义事件： 组件实例.$emit('事件名', 数据)

        3. 通过$on 绑定
           1. 在Father组件中，获取Son组件的vc实例对象
           2. 什么时机绑定？ 

    -->
    <!-- <Son @haha="xiao"/> -->
    <Son ref="son" />

  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: { Son },
  name: 'Father',
  data() {
    return {
      name: '',
    }
  },
  methods: {
    xiao(school, aaa, bbb) {
      console.log('我笑了:', school, aaa, bbb)
    },
    heihei(value){
        console.log('heihei this:' ,this)
    }
  },
  mounted() {
    // 定义成普通方法，事件回调的this指向子组件的实例，而不是当前组件的实例
    // this.$refs.son.$on('heihei', function(value){
    //     console.log('$on 事件回调的this是谁 :', this) // 是子组件的实例
    //     console.log('value: ', value)
    // })

    // 方式一：事件回调定义成箭头函数 [推荐]
    // this.$refs.son.$on('heihei', (value)=>{
    //     console.log('$on 事件回调的this是谁 :', this)
    //     console.log('value: ', value)
    // })
    // 方式二：缓存 mounted中的this [不推荐]
    // let _this = this
    // this.$refs.son.$on('heihei', function (value) {
    //   console.log('$on 事件回调的this是谁 :', _this) 
    //   console.log('value: ', value)
    // })

    // 方式三：
    this.$refs.son.$on('heihei', this.heihei)
  },
}
</script>

<style>
.wrapper {
  width: 500px;
  height: 300px;
  background-color: aquamarine;
}
</style>